<template>
	<div style="display: flex;flex-direction: column;" class="otherPage corporateOverview">
		<Header :selected="3"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover;':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="2" :bgColor="bgColor">
		</Navigation>
		<div class="content">
			<div class="content_bg">
				<el-row :gutter="10">
					<el-col v-for="item in contentList" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
						<div class="row">
							<img class="img" :src="item.coverImage" />
							<div class="title" :title="item.title">{{item.title}} </div>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="24" type="flex" class="paginationArea">
					<el-pagination background :current-page.sync="currentPage" :page-size="pageSize"
						:layout="isShowJumper?'prev, pager, next,total,jumper ':'prev, next,total' "  :total="total"
						:prev-text="$t('previousPage')" :next-text="$t('nextPage')"
						@current-change="handleCurrentChange" />
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import {
		corporateOverviewMenu
	} from '../../utils/menu.js'
	import {
		getStore,
		setStore
	} from '../../utils/tools.js';
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				isShowJumper: true,
				loading: true,
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: corporateOverviewMenu,
				pageSize: 8,
				total: 0,
				currentPage: 1,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('corporateOverview'),
						to: '/corporateOverview'
					},
					{
						label: this.$t('corporateHonor'),
						to: '/corporateHonor'
					}
				],
				hoverIndex: -1,

				contentList: [{
						src: "",
						title: "",
						content: ""
					},


				]


			};
		},
		computed: {},
		created() {},
		mounted() {
			this.bindBg();
			this.bindEnterpriseHonorPage();
			if (this.$request.checkIsMobile()) {
				this.isShowJumper = false;
			}
		},
		methods: {


			/**
			 * (1)	获取企业简介顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getEnterpriseHonorTopImage(params).then(res => {
					this.bgImg = res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});

			},
			/**
			 * (1)	获取企业简介-(2)	获取企业荣誉
			 */
			bindEnterpriseHonorPage() {
				let HonorPage = parseInt(getStore("HonorPage"));
				this.currentPage = HonorPage > 0 ? HonorPage : this.currentPage;
				//	alert(this.currentPage)
				let params = {
					"pageNum": this.currentPage,
					"pageSize": this.pageSize
				};
				// let params = {};
				let that = this;
				that.$request.getEnterpriseHonorPage(params).then(res => {
					this.contentList = res.data.records;
					this.total = res.data.total;
					this.pageSize = res.data.size;
					this.currentPage = res.data.current;
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});

			},
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},

			handleCurrentChange(currentPage) {
				//alert(currentPage);
				this.currentPage = currentPage;
				setStore("HonorPage", this.currentPage);
				this.bindEnterpriseHonorPage();
			},
			gotoInfo(id) {
				this.$router.push({
					name: this.$t('corporateHonorInfo'),
					query: {
						id: id
					}
				});
			}

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/corporateOverview/companyProfile.css");

	.corporateOverview .paginationArea {
		height: 70px;
		line-height: 70px;
		justify-content: center;
		padding-top: 20px;
	}

	.title {
		white-space: nowrap;
		/* 设置文本不换行 */
		overflow: hidden;
		/* 设置超出部分隐藏 */
		text-overflow: ellipsis;
		/* 设置超出部分显示省略号 */
		text-align: center;
		/* margin: 10px 0; */
		color: #3D0D0D;
		font-size: 14px;
		cursor: pointer;
		height: 40px;
		line-height: 40px;
	}

	.row:hover {

		.title {
			color: #0484D7;
		}

	}

	.img {
		width: 100%;
		/* max-height: 22vh; */
		height: 22vh;
		cursor: pointer;
		border-radius: 8px;
	}

	.row {
		text-align: center;
		cursor: pointer;
		overflow: hidden;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.row:hover {
		transform: scale(0.96)
	}



	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.row img {
			width: calc(1px*(2560/1920*261));
			height: calc(1px*(2560/1920*174));
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.row img {
			width: calc(1px*(2560/1920*261));
			height: calc(1px*(2560/1920*174));
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}

		.row img {
			width: calc(1px*(2320/1920*261));
			height: calc(1px*(2320/1920*174));
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}

		.row img {
			width: calc(1px*(2120/1920*261));
			height: calc(1px*(2120/1920*174));
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.row img {
			width: 261px;
			height: 174px;
		}
	}

	@media (max-width: 1720px) {

		.content_bg {
			width: calc(1720px * 0.8);
		}

		.row img {
			width: calc(1px*(1720/1920*261));
			height: calc(1px*(1720/1920*174));
		}

	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}

		.row img {
			height: calc(1px*(1520/1920*174));
			width: calc(1px*(1520/1920*261));
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}

		.row img {
			width: calc(1px*(1366/1920*261));
			height: calc(1px*(1366/1920*174));
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: calc(1120px * 0.8);
		}

		.row img {
			width: calc(1px*(1120/1920*261));
			height: calc(1px*(1120/1920*174));
		}
	}

	@media (max-width: 1024px) {
		.content_bg {
			width: 100%
		}

		.row {
			min-height: 260px;
		}

		.row img {
			width: 300px;
			height: calc(300px * 174 / 261);
		}
	}

	@media (max-width: 768px) {
		.row {
			min-height: 260px;
		}
	}

	@media (max-width: 440px) {
		.title {
			white-space: break-spaces;
			height: 48px;
			line-height: 24px;
			overflow: unset;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin-top: 10px;
		}

		.row {
			min-height: 276px;
		}
	}
</style>
